<script type="text/ng-template" id="skins/Conversation">
  <link rel="stylesheet" type="text/css"
        href="/extensions/skins/conversation_v1/static/conversation.css">

  <div role="main" style="margin: 0 auto; position: relative;">
    <div class="conversation-skin-cards-container">
      <md-card class="conversation-skin-exploration-intro-card">
        <img ng-src="<[introCardImageUrl]>">
        <div class="conversation-skin-exploration-header">
          <h3 itemprop="description" role="heading" class="protractor-test-exploration-header"><[explorationTitle]></h3>
        </div>
      </md-card>

      <div class="conversation-skin-iframe-container">
        <div ng-repeat="state in allResponseStates track by $index"
             ng-class="{'conversation-skin-last-log-entry': $last}">
          <md-card class="conversation-skin-card">
            <div dropdown class="dropdown conversation-skin-card-dropdown" ng-if="state.stateName && !isInPreviewMode">
              <img dropdown-toggle src="/third_party/static/material-design-icons-1.0.1/ic_more_vert_black_48dp.png" class="dropdown-toggle conversation-skin-card-dropdown-toggle">
              <ul class="dropdown-menu dropdown-menu-right">
                <li>
                  <a href="" ng-click="openCardFeedbackModal(state.stateName)">Give Feedback</a>
                </li>
              </ul>
            </div>

            <table class="conversation-skin-card-row-container">
              <tr class="conversation-skin-card-row">
                <td class="conversation-skin-row-avatar" valign="top">
                  <img class="conversation-skin-row-avatar-img" src="/images/general/oppia_black_48px.png">
                </td>
                <td class="conversation-skin-oppia-output conversation-skin-oppia-content">
                  <div class="protractor-test-conversation-content" angular-html-bind="state.content"></div>
                </td>
              </tr>
            </table>

            <div ng-repeat="responsePair in state.answerFeedbackPairs track by $index">
              <table class="conversation-skin-card-row-container">
                <tr ng-show="responsePair.learnerAnswer" class="conversation-skin-card-row">
                  <td class="conversation-skin-row-avatar" valign="top">
                    <img class="conversation-skin-row-avatar-img img-circle" ng-src="<[profilePicture]>">
                  </td>
                  <td class="conversation-skin-learner-answer" angular-html-bind="responsePair.learnerAnswer"><td>
                </tr>
              </table>
              <table ng-show="responsePair.oppiaFeedback" class="conversation-skin-card-row-container">
                <tr class="conversation-skin-card-row">
                  <td class="conversation-skin-row-avatar" valign="top">
                    <img class="conversation-skin-row-avatar-img" src="/images/general/oppia_black_48px.png">
                  </td>
                  <td class="conversation-skin-oppia-output conversation-skin-oppia-feedback protractor-test-conversation-feedback" angular-html-bind="responsePair.oppiaFeedback"></td>
                </tr>
              </table>
            </div>

            <div ng-if="$last" ng-show="waitingForOppiaFeedback">
              <div class="conversation-skin-loading-dots">
                <div class="oppia-loading-dot-one"></div>
                <div class="oppia-loading-dot-two"></div>
                <div class="oppia-loading-dot-three"></div>
              </div>
            </div>

            <div ng-if="stateName && !waitingForNewCard && !waitingForOppiaFeedback && interactionIsInline && $last">
              <div class="conversation-skin-inline-interaction">
                <table class="conversation-skin-card-row-container" style="margin-bottom: 0;">
                  <tr class="conversation-skin-card-row">
                    <td class="conversation-skin-row-avatar" valign="top">
                      <img class="conversation-skin-row-avatar-img img-circle" ng-src="<[profilePicture]>">
                    </td>
                    <td class="conversation-skin-learner-input protractor-test-conversation-input"
                        angular-html-bind="inputTemplate">
                    </td>
                  </tr>
                </table>
              </div>
            </div>
          </md-card>
        </div>
      </div>

      <div ng-if="waitingForNewCard">
        <div class="conversation-skin-loading-dots">
          <div class="oppia-loading-dot-one"></div>
          <div class="oppia-loading-dot-two"></div>
          <div class="oppia-loading-dot-three"></div>
        </div>
      </div>

      <div class="conversation-skin-supplemental-interaction">
        <div ng-if="!waitingForNewCard && !interactionIsInline && inputTemplate">
          <md-card class="conversation-skin-supplemental-card">
            <div class="protractor-test-conversation-input" angular-html-bind="inputTemplate">
            </div>
          </md-card>
        </div>
      </div>
    </div>
  </div>
</script>
